<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css" />
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
  <script src="./index.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .proj {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10px 0;
    }

    .title {
      margin-bottom: 10px;
      font-size: 20px;
    }

    .tag {
      margin-bottom: 10px;
      min-height: 22px;
    }

    .item {
      max-width: 500px;
      margin: 20px 10px;
      background: aliceblue;
      padding: 20px 5%;
      box-sizing: border-box;
      border-radius: 10px;
    }

    .video video {
      width: 100%;
    }

    .el-tag+.el-tag {
      margin-left: 5px;
    }
  </style>
  <div id="app">
    <template>
      <el-main>
        <div class="proj">
          <el-input prefix-icon="el-icon-search" placeholder="请输入需要搜索的项目" v-model="search"
            style="width: 40%; min-width: 300px"></el-input>
          <el-select v-model="select" multiple placeholder="请选择" style="width: 40%; min-width: 300px" @change="change">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <div>
            <el-popover placement="top-start" width="200" trigger="hover">
              <el-image src="http://img.lijundong.cn/weixin.jpg" fit="contain"
                :preview-src-list="['http://img.lijundong.cn/weixin.jpg']"></el-image>
              <el-button slot="reference" type="danger" plain>联系我</el-button>
            </el-popover>
          </div>
        </div>
        <div class="proj" v-if="list.length>0">
          <div class="item" v-for="(item,index) in list.filter(item=>item.title.includes(search))" :key="index">
            <div class="title">{{item.title}}</div>
            <div class="tag">
              <el-tag v-for="(tags,index2) in item.tag" :key="index2" size="mini" :type="index2|tagType">{{tags.label}}
              </el-tag>
            </div>
            <div class="video">
              <video :poster="item.imgs[0]" :src="item.video" controls></video>
            </div>
            <div class="imgs" v-if="item.imgs.length>0">
              <el-carousel :autoplay="false" type="card" height="100px" indicator-position="none"
                :arrow="item.imgs.length===1?'never':'always'">
                <el-carousel-item v-for="(data,val) in item.imgs" :key="val">
                  <el-image :src="data" fit="contain" :preview-src-list="item.imgs"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <div v-show="list.filter(item=>item.title.includes(search)).length===0">
          <el-empty description="暂无数据!"></el-empty>
        </div>
      </el-main>
    </template>
  </div>
  <script>
    var Main = {
      data() {
        return {
          default: FILE_LIST,
          list: FILE_LIST,
          search: "",
          options: OPTIONS,
          select: [],
        };
      },
      created() {
      },
      filters: {
        tagType(index) {
          if ([0, 5, 10].includes(index)) return ''
          if ([1, 6, 11].includes(index)) return 'success'
          if ([2, 7, 12].includes(index)) return 'info'
          if ([3, 8, 13].includes(index)) return 'warning'
          if ([4, 9, 14].includes(index)) return 'danger'
          return ''
        }
      },
      methods: {
        change(val) {
          // 默认
          if (this.select.length === 0) return this.list = this.default
          const arr = []
          this.list = []
          this.select.forEach(sel => {
            this.default.forEach(def => {
              if (def.tag.some(tag => tag.value === sel)) {
                if (!arr.some(ar => ar.id === def.id)) {
                  arr.push(def)
                }
              }
            })
          })
          this.list = arr;
        }
      },
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount("#app");
  </script>
</body>

</html>